<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>鼠标停留显示遮罩层</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            background-color: #ccc;
        }
        ul,li,p{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            font-family: 'Microsoft YaHei';
            width: 390px;
            margin: 0 auto;
        }
        #box .big{
            width: 100%;
            padding: 10px;
            background-color: #eee;
            cursor: pointer;
            position: relative;
        }
        #box .big p{
            width: 90%;
            margin: 20px auto 10px auto;
            font-size: 12px;
            line-height: 20px;
            color: #333;
        }
        #box .big .overlay{
            width: 100%;
            height: 100%;
            border: 5px solid #fa2;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        #box ul{
            width: 380px;
            margin-top: 10px;
            background-color: #eee;
            /*清除浮动*/
            /*overflow: hidden;*/
        }

        /*推荐使用公共类*/
        .clearfix{
            /*zoom IE浏览器专有的属性，用来解决IE5、IE6的浮动问题*/
            zoom: 1;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        #box ul li{
            float: left;
            width: 170px;
            height: 170px;
            margin: 0 10px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        #box li .overlay{
            width: 100%;
            height: 100%;
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        #box li .text{
            width: 100%;
            height: 100%;
            padding: 20px;
            color: #fff;
            font-size: 12px;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: -170px;
        }
        #box li .text span{
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <!--大图-->
        <div class="big">
            <img src="img/1.jpg" alt="">
            <p>【金熹】设计上运用了多片层叠设计，形成立体倒放的花苞视觉效果，创意独特。浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质雪纺面料让小衫更显质感穿着凉爽透气，做工也相当考究。</p>
            <div class="overlay"></div>
        </div>

        <!--小图-->
        <div>
            <ul class="clearfix">
                <li>
                    <img src="img/2.jpg" alt="">
                    <div class="overlay"></div>
                    <p class="text"><span>spedal品牌旗舰店</span>最具传奇浪漫色彩的欧洲经典设计，给你带来专属的魅力</p>
                </li>
                <li>
                    <img src="img/3.jpg" alt="">
                    <div class="overlay"></div>
                    <p class="text"><span>spedal品牌旗舰店</span>最具传奇浪漫色彩的欧洲经典设计，给你带来专属的魅力</p>
                </li>
                <!--<div style="clear: both;"></div>-->
            </ul>
        </div>
    </div>
</body>
</html>

<script>
    // 大图遮罩层
    $('#box .big').hover(function(){
        $('#box .big .overlay').stop().animate({
            opacity:1
        },500);
    },function(){
        $('#box .big .overlay').stop().animate({
            opacity:0
        },500);
    })

    // 小图遮罩层和文字
    $('#box ul li').hover(function(){
        // 显示遮罩层和文字
        $(this).find('.overlay').stop().animate({
            opacity:0.5
        },300)
        $(this).find('.text').stop().animate({
            left:0
        },200)
    },function(){
        // 隐藏遮罩层和文字
        $(this).find('.overlay').stop().animate({
            opacity:0
        },300)
        $(this).find('.text').stop().animate({
            left:-170
        },200)
    })
</script>